<template>
  <div class="recommend_container">
    <div class="recommend_head">
      <p>人气推荐 ></p>
    </div>
    <div class="recommend_foot">
      <ul>
        <li
          v-for="(item, index) in list.slice(5, 9)"
          :key="index"
          @click="recommend(item.id)"
        >
          <div class="img">
            <img :src="item.pic" alt="" width="100%" height="200px" />
          </div>
          <p>{{ item.name }}</p>
          <span>{{ item.recommendStatusStr }}</span>
          <div>￥{{ item.minPrice }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
    };
  },
  mounted() {
    this.$API
      .List()
      .then((res) => {
        console.log(res);

        this.list = res.data.data;
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    recommend(id) {
      this.$router.push({ path: "/recommendList", query: { id } });
    },
  },
};
</script>
<style lang="scss" scoped>
.recommend_container {
  width: 100%;
  height: 13.4rem;
  background-color: white;
  margin-top: 10px;
  margin-bottom: 50px;
  .recommend_head {
    width: 100%;
    height: 1.2rem;
    /* // background-color: lightslategray; */
    border-bottom: 1px solid gainsboro;
    text-align: center;
    line-height: 1.2rem;
    box-sizing: border-box;
    p {
      font-size: 0.4rem;
    }
  }
  .recommend_foot {
    width: 100%;
    height: 12.2rem;
    ul {
      width: 100%;
      height: 100%;
      padding: 5px;
      box-sizing: border-box;
      display: inline-flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      li {
        width: 49%;
        height: 50%;
        box-sizing: border-box;

        /* // border: 1px saddlebrown solid; */
        p {
          font-size: 0.3rem;
          margin: 5px 0 8px 0;
        }
        span {
          color: gray;
        }
        div {
          margin-top: 6px;
          color: red;
        }
      }
    }
  }
}
</style>